<template>
    <div class="box" v-loading="loading">
        <!-- <div class="title">
            题目管理
        </div> -->
        <div class="search">
           <div class="search-content">
                <div class="search-left">
                    <el-input
                    placeholder="请输入搜索标题" 
                    v-model="searchTitle"
                    autocomplete
                    maxlength="50"
                    show-word-limit
                    />
                    <el-input
                    placeholder="请输入搜索题解"
                    v-model="searchAnswer"
                    autocomplete
                    maxlength="50"
                    show-word-limit
                    />
                    <el-select v-model="searchContent.chooseLevel" placeholder="请选择等级" class="my-select">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="searchContent.topicLibraryId" placeholder="请选择题库" class="my-select">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.value"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-right">
                    <button @click="searchLikeStr()">查询</button>
                </div>
           </div>
        </div>
        <div class="top">
            <div class="top-content">
                <div>
                    <button  @click="dialogFormVisible = true">增加题目+</button>
                    <button @click="delIsChecked(selection)">批量删除-</button>    
                </div>
              
            </div>
        </div>
        <div class="content">   
        <el-table  :data="allTopic" :row-selection="true" @selection-change="allCheckd" scrollbar-always-on="true" border style="width: 100%" max-height="400px" type="index" :row-style="{height:'18px'}">
            <el-table-column  width="55" label="全选"  fixed="left" type="selection">
            </el-table-column>
            <el-table-column prop='Count' label="题目序号" width="140" fixed="left" align="center"/>
            <el-table-column prop="chooseTitle" label="题目标题" width="800" :show-overflow-tooltip="true"/>       
            <el-table-column prop="chooseLevel" label="题目等级" width="180" align="center" :class-name="levelTextColor" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div :style="'text-align: center;'+scope.row.levelTextColor">
                      {{scope.row.chooseLevel}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="chooseAnswer" label="题目题解" width="420" align="center" :show-overflow-tooltip="true"/>
            <el-table-column  label="操作" fixed="right" width="300" align="center">
                <template #default="scope">
                    <button class="delBtn" @click="delTopic(scope.$index)">删除</button>
                    <button class="editBtn" @click="dialogUpdate(scope.$index)">修改</button>
                </template>
            </el-table-column>           
        </el-table>
            <div class="bottom">
                <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                @current-change="changePage"
                @prev-click="changePage"
                @next-click="changePage"
                :total="pageTotals">
                </el-pagination>
            </div>
        </div>
         <!-- 富文本编辑器 -->
        <el-dialog v-model="showTextarea" width="60%" center :close-on-click-modal="false">
            <MyEditor :getTextareaContent="getTextareaContent"></MyEditor>
        </el-dialog>
           <el-dialog title="添加题目内容" v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false"  show-close="true" destroy-on-close="false">
            <el-form ref="forms" :model="forms">
                <el-form-item label="题目标题" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="topicList.chooseTitle" autocomplete="off" class="el-input" @focus = "showTextarea = true"></el-input>
                </el-form-item>
                <el-form-item label="题库" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="topicList.topicLibraryId" maxlength="10" autocomplete="off" class="el-input" ></el-input>
                </el-form-item>
                <el-form-item label="题解" :label-width="formLabelWidth">
                        <el-input
                        type="textarea"
                        resize="none"
                        placeholder="请输入内容"
                        class="el-input"
                        maxlength="100"
                        show-word-limit
                        @focus = "showTextarea = true"
                        v-model="topicList.chooseAnswer">
                        </el-input>
                </el-form-item>
                <el-form-item label="题目等级" :label-width="formLabelWidth">
                  <el-select v-model="topicList.chooseLevel"  placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>    
                     <button class="addButton" @click="addChoose()">+</button>
                    <button class="delButton" @click="delChoose()">-</button>
                </el-form-item>
                 <el-form-item :label="'题目选项'+(index+1)" :label-width="formLabelWidth" class="el-input" v-for="(item,index) in num" :key="index">
                    <el-input v-model="topicList.choosecontents[index].chooseContent" autocomplete="off"></el-input>                 
                    <el-select v-model="topicList.choosecontents[index].chooseIsTrue" clearable placeholder="请选择是否正确" class="el-select">
                        <el-option
                        label="错误"
                        value="0"
                        >
                        </el-option>
                        <el-option
                        label="正确"
                        value="1"
                        >
                        </el-option>
                    </el-select>    
                </el-form-item>       
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="emptyForm()" >确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改题目内容" v-model="dialogUpdatemVisible"  :close-on-click-modal="false" lock-scroll show-close="false">
            <el-form >
                <el-form-item label="题目标题" :label-width="formLabelWidth">
                        <el-input
                        type="textarea"
                        class="el-input"
                        maxlengt=100px
                        resize="none"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        v-model="topicListChange.chooseTitle">
                        </el-input>
                </el-form-item>
                <el-form-item label="题库" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="topicListChange.topicLibraryId" autocomplete="off" class="el-input"></el-input>
                </el-form-item>
                <el-form-item label="题解" :label-width="formLabelWidth">
                        <el-input
                        type="textarea"
                        class="el-input"
                        maxlengt=100px
                        resize="none"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="topicListChange.chooseAnswer">
                        </el-input>
                </el-form-item>
                <el-form-item label="题目等级" :label-width="formLabelWidth">
                  <el-select v-model="topicListChange.chooseLevel" clearable placeholder="请选择">
                        <el-option
                        v-for="(item,index) in options3"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>    
                </el-form-item>
                 <el-form-item :label="'题目选项'+(index+1)" :label-width="formLabelWidth" class="el-input" v-for="(item,index) in topicListChange.choosecontents" :key="index">
                    <el-input v-model="item.chooseContent" autocomplete="off"></el-input>   
                    <el-select v-model="item.chooseIsTrue" clearable placeholder="请选择是否正确" class="el-select">
                        <el-option
                        label="错误"
                        :value="0"
                        >
                        </el-option>
                        <el-option
                        label="正确"
                        :value="1"
                        >
                        </el-option>
                    </el-select>    
                </el-form-item>       
            </el-form>
            <div class="dialog-footer">
                <el-button @click="cancelUpdate(index)">取 消</el-button>
                <el-button type="primary" @click="dialogUpdated()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<!-- Form -->
     
</template>

<script>
import {updatetips,pageInfo,pageTotal,searchResult,pageSearchResultTotal} from '../../api/secondary_api/topic';
import MyEditor from '@/components/MyEditor.vue'
export default {
    name:'PageRiderManage',
     data() {
        return{
            id:0,
            Visiable:false,
            checkIsChecked:false,
            allCheckeds:false,
            allCheckdList:[],
            showTextarea:false,//显示富文本页面
            loading:true,
            num:2,//题目初始数量 
            pageNum:1,//页码
            pageSize:10,//页面总条数
            pageTotals:0,//查询到的总条数
            searchTitle:'',//搜索的标题
            searchAnswer:'',//搜索的题解
            searchContent:{//搜索结果模板
             "topicLibraryId": "",
                "chooseTitle": "",
                "chooseLevel":"",
                "chooseAnswer": "",
                "pageSize":'10',
                "pageNum":1

            },
            levelTextColor:"",//等级转换颜色
            options: [{//等级选项
                value: '1',
                label: '简单'
                }, {
                value: '2',
                label: '中等'
                }, {
                value: '3',
                label: '困难'
                }, {
                value: '',
                label: '全部'
                }               
            ],options3: [{//等级选项
                value: 1,
                label: '简单'
                }, {
                value: 2,
                label: '中等'
                }, {
                value: 3,
                label: '困难'
                }               
            ],
             options2: [{//题库的选项
                value: '1',
                label: '简单'
                }, {
                value: '2',
                label: '中等'
                }, {
                value: '3',
                label: '困难'
                }, {
                value: '无',
                label: ''
                }
            ],
            value3: '',
            value4: '', 
            allTopic:[],
              textarea2: '',//添加标题内容
              textarea3: '',//修改标题内容
             dialogUpdatemVisible: false,//修改弹框的显示
             dialogFormVisible: false,//修改增加弹框的显示
             formLabelWidth: '100px',
            topicList:{//添加题目的模板
                "topicLibraryId": "",
                "chooseTitle": "",
                "chooseWriter": 1,
                "languageId": "1",
                "chooseLevel":"",
                "chooseAnswer": "",
                "tip": 0,
                "choosecontents": [
                    {
                        "chooseContent": "",
                        "chooseIsTrue": ""
                    },{
                        "chooseContent": "",
                        "chooseIsTrue": ""
                    }
                ]
                },
            topicListChange:null,//题目改变后的数组
            searchResultList:null,//搜索结果的数组
            topicList1:`
                {"topicLibraryId": 0,
                "chooseTitle": "",
                "chooseWriter": 0,
                "languageId": "1",
                "chooseLevel":"",
                "chooseAnswer": "",
                "tip": 0,
                "choosecontents": [
                    {
                        "chooseContent": "",
                        "chooseIsTrue": ""
                    },{
                        "chooseContent": "",
                        "chooseIsTrue": ""
                    }
                ]}
                `
          }
    },
    components:{
      MyEditor,
    },
    methods: {
        test(index){
            console.log(index);
        },
        getTextareaContent(content){
            console
            this.topicList.chooseTitle = content;
            this.topicList.chooseAnswer = content;
      },
        openSuccess() {//成功信息弹窗
            this.$message({
                message: '添加数据成功！！！',
                type: 'success'
            });
         },
        openError(response) {//错误信息弹窗
           this.$message.error(response.msg);
         },
        addTopic(){//增加题目
            this.pageTotals = this.pageTotals+1; 
            updatetips(this.topicList).then(
                response=>{
                    if (response.code == 200) {
                        this.changePage(this.pageNum);
                        this.openSuccess();
                    }else {
                        this.openError(response);
                    }
                }
            );     
        },
        delTopic(index){ //删除题目    
            this.allTopic[index].tip = 1;
            this.pageTotals = this.pageTotals-1;
                if(this.allTopic[index].chooseLevel == "简单"){
                    this.allTopic[index].chooseLevel = 1;
                }else if(this.allTopic[index].chooseLevel == "中等"){
                    this.allTopic[index].chooseLevel = 2;
                }else if(this.allTopic[index].chooseLevel == "困难"){
                    this.allTopic[index].chooseLevel = 3;
                }else{
                    this.allTopic[index].chooseLevel = 0;
                }  
            updatetips(this.allTopic[index]).then(
                response=>{
                }
            );
            this.allTopic.splice(index,1);
        },
        cancelUpdate(i){
            this.dialogUpdatemVisible = false;
            console.log(this.topicListChange.chooseLevel == 2)
            if(this.topicListChange.levelTextColor == "color:green"){
                this.topicListChange.chooseLevel = "简单";
            }else if(this.topicListChange.levelTextColor == "color:green"){
                this.topicListChange.chooseLevel = "中等";
            }else if(this.topicListChange.levelTextColor == "color:red"){
                this.topicListChange.chooseLevel = "困难";
            }
            console.log(this.topicListChange,this.allTopic[i])
            // console.log( this.topicListChange,"aaaaaaaaaaaaaaaaaaa");
            // this.topicListChange = this.allTopic[i]; 
        },
        dialogUpdate(i){//修改获取数据
            this.dialogUpdatemVisible=true;
            this.topicListChange = this.allTopic[i]; 
            // this.changeUpdate();
        },
        dialogUpdated(){//修改后发送数据
            //   this.changeUpdated();  
            // var topic = {
            //     chooseLevel:this.topicListChange.chooseLevel
            // };
            // topic['chooseLevel'] = this.topicListChange.chooseLevel;
            this.dialogUpdatemVisible = false; 
            if(isNaN(this.topicListChange.chooseLevel)){
                if(this.topicListChange.chooseLevel == "简单"){
                    this.topicListChange.chooseLevel = 1;
                }else if(this.topicListChange.chooseLevel == "中等"){
                    this.topicListChange.chooseLevel = 2;      
                }else if(this.topicListChange.chooseLevel == "困难"){
                    this.topicListChange.chooseLevel = 3;        
                }else{
                    this.topicListChange.chooseLevel = "";
                }
            }
            updatetips(this.topicListChange).then(
                response=>{
                    // console.log(response,111111111111);
                }
            );
            if(this.topicListChange.chooseLevel == 1){
                this.topicListChange.chooseLevel = "简单";
                this.topicListChange['levelTextColor'] = "color:green";
            }else if(this.topicListChange.chooseLevel == 2){
                this.topicListChange.chooseLevel = "中等";      
                this.topicListChange['levelTextColor'] = "color:orange";
            }else if(this.topicListChange.chooseLevel == 3){
                this.topicListChange.chooseLevel = "困难";        
                this.topicListChange['levelTextColor'] = "color:red";
            }else{
                this.topicListChange.chooseLevel = "";
            }

            
        },
        changeUpdate(){
            for (let index = 0; index < this.topicListChange.choosecontents.length; index++) {
                if(this.topicListChange.choosecontents[index].chooseIsTrue == 1){
                    this.topicListChange.choosecontents[index].chooseIsTrue = "正确"
                }else{
                    this.topicListChange.choosecontents[index].chooseIsTrue = "错误"
                }
            }    
        },
        changeUpdated(){
            for (let index = 0; index < this.topicListChange.choosecontents.length; index++) {
                if(this.topicListChange.choosecontents[index].chooseIsTrue == "正确"){
                    this.topicListChange.choosecontents[index].chooseIsTrue = 1;
                }else{
                    this.topicListChange.choosecontents[index].chooseIsTrue = 0;
                }
            }    
        },
       emptyForm(){//清空添加内容
            for (let i = 0; i < this.topicList.choosecontents.length; i++) {
               if (this.topicList.choosecontents[i].chooseContent != '') {
                   for (let j = 0; j < this.topicList.choosecontents.length; j++) {
                      if (this.topicList.choosecontents[i].chooseContent == this.topicList.choosecontents[j].chooseContent && i != j) {
                            this.$message.error('选项不能相同！！');   
                      }  
                   }
               }else{
                    this.$message.error('内容不能为空！！');  
                    break; 
               }                
            }
            this.addTopic();
            this.dialogFormVisible = false;  
            this.topicList = JSON.parse(this.topicList1);
            this.$refs.forms.resetFields();
            this.num = 2;
        },
        chooseLevelText(){//难度颜色改变
            for (let i = 0; i < this.allTopic.length; i++) {
                if(this.allTopic[i].chooseLevel == 1){
                    this.allTopic[i].chooseLevel = "简单";
                    this.allTopic[i]['levelTextColor'] = "color:green";
                }else if(this.allTopic[i].chooseLevel == 2){
                    this.allTopic[i].chooseLevel = "中等";
                    this.allTopic[i]['levelTextColor'] = "color:orange";
                }else if(this.allTopic[i].chooseLevel == 3){
                    this.allTopic[i].chooseLevel = "困难";
                    this.allTopic[i]['levelTextColor'] = "color:red";
                }else{
                    this.allTopic[i].chooseLevel = "";
                }
            }            
        },
        changePage(e){//搜索分页切换
           this.loading = true;
           this.searchContent.pageNum = e;
           this.pageNum = e;
           this.allCheckeds =false;
           setTimeout(() => {
               searchResult(this.searchContent).then(
                response=>{
                    if(response.code==200){            
                        this.searchResultList = response.data;
                        this.allTopic = this.searchResultList;
                        for (let index = 0; index < this.allTopic.length; index++) {
                            this.allTopic[index]['isChecked']=false;  
                            this.allTopic[index]['Count']=(this.pageNum-1)*this.pageSize+index+1;     
                        }
                        this.chooseLevelText();
                    }else if(response.code==201){
                        this.$message.error(response.msg);   
                    }             
                }
            );
            pageSearchResultTotal(this.searchContent).then(
                response=>{
                    this.pageTotals = response.data;
                    // console.log(response.data);
                    this.loading = false;
                }
            );
           }, 50);
        },
        addChoose(){//增加选项
            this.num = this.num+1;
            this.topicList.choosecontents.push({
                "chooseContent": "",
                "chooseIsTrue": "0"
            });
        },

        delChoose(){//减少选项
            this.num = this.num-1;
            this.topicList.choosecontents.splice();
        },
        
        allCheckd(selection){//全选   
           this.allCheckdList = selection;
           for (let index = 0; index < this.allCheckdList.length; index++) {
               this.allCheckdList[index].isChecked=!this.allCheckeds;
                console.log("isisiis",index,this.allCheckdList);
                
           }
        },
        delIsChecked(){//批量删除
            var temp = [];
            for(let index = 0; index < this.allCheckdList.length; index++){
                if(index != 0){
                    for(let i in temp){
                        if(this.allCheckdList[index].Count < temp[i].Count ){
                            temp.splice(i,0,this.allCheckdList[index]);
                            break;
                        }else{
                            temp.push(this.allCheckdList[index]);
                            break;
                        }
                    }
                }else{
                    temp.push(this.allCheckdList[index]);
                }
            }
            this.allCheckdList = temp.reverse();
            this.pageTotals = this.pageTotals-1;
            for (let index = 0; index < this.allCheckdList.length; index++) {
                if(this.allCheckdList[index].chooseLevel == "简单"){
                   this.allCheckdList[index].chooseLevel = 1;
                }else if(this.allCheckdList[index].chooseLevel == "中等"){
                   this.allCheckdList[index].chooseLevel = 2;
                }else if(this.allCheckdList[index].chooseLevel == "困难"){
                    this.allCheckdList[index].chooseLevel = 3;
                }else{
                   this.allCheckdList[index].chooseLevel = 0;
                }  
                this.allCheckdList[index].tip =1;
                this.allTopic.splice(this.allCheckdList[index].Count-(this.pageNum-1)*this.pageSize-1,1);
                updatetips(this.allCheckdList[index]).then(
                    response=>{
                        // console.log(response,22222222222222222);
                    }
                );  
            }
            for(let i =0;i<this.allTopic.length;i++){
                this.allTopic[i].Count = i+1+(this.pageNum-1)*this.pageSize
            }
        },
        searchLikeStr(){//模糊查询
            this.searchContent.chooseTitle=this.searchTitle;
            this.searchContent.chooseAnswer=this.searchAnswer;  
            if (this.searchContent.topicLibraryId == "无") {
                this.searchContent.topicLibraryId='';
            }      
            searchResult(this.searchContent).then(
                response=>{
                    if(response.code==200){         
                        this.searchResultList = response.data;
                        this.allTopic = this.searchResultList;
                        for (let index = 0; index < this.allTopic.length; index++) {
                            this.allTopic[index]['Count']=(this.pageNum-1)*this.pageSize+index+1;
                        }     
                        this.chooseLevelText();
                    }else if(response.code==201){
                            this.$message.error(response.msg);   
                    }
                     
                }
            );
            pageSearchResultTotal(this.searchContent).then(//查询模糊结果的总条数
                response=>{
                    this.pageTotals = response.data;
                }
            );
             this.searchResultList=[];
        } 
      } ,  
        mounted(){
            pageTotal().then(//获取数据的总条数
                 response=>{
                    if(response.code==200){         
                        this.pageTotals=response.data;
                    }else if(response.code==500){
                        this.message = response.msg;
                        ElMessage.error(response.msg);
                    }
               }
            ),
           pageInfo({pageNum:this.pageNum,pageSize:this.pageSize}).then(//获取分页数据
               response=>{
                    if(response.code==200){         
                        this.allTopic = response.data;
                        this.loading = false;
                        for (let index = 0; index < this.allTopic.length; index++) {
                            this.allTopic[index]['isChecked']=false; 
                            this.allTopic[index]['Count']=(this.pageNum-1)*this.pageSize+index+1;     
                        }
                        this.chooseLevelText(); 
                        console.log(this.allTopic);
                    }else if(response.code==500){
                        this.message = response.msg;
                        ElMessage.error(response.msg);
                    }
               }
           )
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        /* height: calc(100vh - 151px); */
        height: 100%;
        font-style: 40px;
        position: relative;
        overflow: hidden;
    }
    .title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        text-indent: 2em;
        border-bottom: 1px solid #Ccc;
    }
    .top{
        width: 100%;
        /* padding: 0 2%; */
        overflow: hidden;
        margin-top: 10px;
    }
    .top-content{
        width: 100%;
        height: 35px;
        margin-top: 10px;
        overflow: hidden;
    }
     .top-content>div{
        float: right;
     }
     .top-content>div>button{
         width: 130px;
         height: 35px;
         line-height: 35px;
         color: #000;
         margin-left: 10px;
         border-radius: 5px;
        border: 1px solid #fff;
     }
     button:hover{
         opacity: 0.5;
     }
      .top-content>div>button:nth-of-type(1){
          background-color: #00ffff;
     }
     .top-content>div>button:nth-of-type(2){
           background-color: red;
     }
     .search{
         width: 100%;
         /* padding: 0 2%; */
         overflow: hidden;
     }
     .search-content{
         width: 100%;
         overflow: hidden;
         margin-top: 10px;
          border: 1px solid #ccc;
     }
     .search-left{
         width: 90%;
         float: left;
     }
    .search-right{
         width: 10%;
         float: left;
     }
     .search-left>.el-input{
         width: 20%;
     }
     .search-right>button{
         width: 100%;
         height: 32px;
         overflow: hidden;
         background-color: #00ffff;
         float: right;
        border: 1px solid #fff;
        border-radius: 5px;
     }
    .content{
        /* height: 500px; */
        height:70%;
        margin-top: 1%;
        /* overflow: hidden; */
        /* padding: 0 2%; */
        /* background-color: red; */
        position: relative;
    }
   
    .topic-top{
        width: 100%;
        overflow: hidden;
    }
     .topic-library-id{
        width: 10%;
    }
    .topic-item{
        width: 100%;
        /* height: 12%; */
        overflow: hidden;
    }
    .topic-top>ul>li{
        list-style: none;
        width: 16.5%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: aliceblue;
        font-size: 15px;
        float: left;
        color: #000;    
        border: 1px solid #ccc; 
    }
     .topic-top>ul>li:nth-of-type(1){
         text-align: center;
         width: 10%;
     }
      .topic-item>ul>li:nth-of-type(1){
          text-align: center;
         width: 10%;
      }
     .topic-top>ul>li:nth-of-type(2){
        text-align: center;
         width: 10%;
     }
    .topic-item>ul>li:nth-of-type(2){
           text-align: center;
         width: 10%;
      }
    .topic-top>ul>li:nth-of-type(3){    
         width: 28%;
     }
    .topic-item>ul>li:nth-of-type(3){
        font-size: 14px;
         width: 28%;
      }
      .topic-top>ul>li:nth-of-type(4){  
         text-align: center;
     }
    .topic-item>ul>li:nth-of-type(4){
          font-size: 15px; 
          text-align: center;
          font-family: "微软雅黑", "隶书",serif;
      }
     .topic-top>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-item>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-top>ul>li:nth-of-type(6){
         text-align: center;
      }
    .topic-item>ul>li:nth-of-type(6){
            text-align: center;
      }
    .topic-item>ul{
           overflow: hidden;
           height: 100%; 
       }
    .topic-item>ul>li{
        list-style: none;
        width: 16.5%;
        padding: 10px 0%;
        line-height: 35px;
        /* height:100%; */
        font-size: 15px;
        float: left;
        text-overflow:  ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        border: 1px solid #ccc; 
    }
    .topic-item>ul>li>span{
        display: inline-block;
    }
     .topic-item:nth-of-type(odd)>ul>li{
         background-color: #eee;
     }
    .delBtn{
        background-color: rgba(245, 6, 6, 0.973);
        color: #fff;
    }
     .editBtn{
        background-color: #0079f3;
        color: #fff;
    }
    .delBtn,.editBtn{
        width: 65px;
        height: 30px;
        line-height: 30px;
        border: 0px;
        border-radius: 5px;
        /* margin-left: 10px;    */
        border: 1px solid #fff;
    }
    .dialog-footer{
        margin-left:42%;
    }
    .addButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 0;
    }
    .delButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 30px;
    }
    .el-input{
        width: 50%; 
    }
    .el-input__count{
        height: 10%;
    }
    .bottom{
        position: absolute;
        left: 45%;
        bottom: -15%;
    }
</style>